<script setup name="Patentinfo">
import {
  Edit,
  Plus,
  Search,
  UploadFilled,
} from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

import Message from 'vue-m-message'
import { computed, ref } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import fundPoolService from '@/api/finance/fundPool.js'
import zlPromptService from '@/api/finance/zlPrompt.js'
import customerInformationService from '@/api/customerInformation/index.js'
import userServices from '@/api/user/user.js'
import patentService from '@/api/patentinfo/index.js'
import caseService from '@/api/case/index.js'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import { useDict } from '@/utils/dict.js'
import 'element-plus/theme-chalk/el-empty.css'
import useMessageBox from '@/utils/useMessageBox.js'

const fileSuffix = ref('')
const lc = ref(false)
const status = ref('')
const scFormRef = ref(null)
const fileFormRef = ref(null)
const viewForm = ref(null)
const gcsId = ref('')
const first = ref('')
const dutyId = ref('')
const secDutyId = ref('')
const isStatus = ref(0)
const assignPersonnel = ref('')
const newRowStatus = ref(0)
const sctitle = ref('')
const customerId = ref('')
const isDele = ref(true)
const fileVisible = ref(false)
const isFullScreen = ref(false)
const uploadVisible = ref(false)
const uploadDisabled = ref(false)
const rowStatus = ref(0)
const fileType = ref([])
const isFileType = ref(0)
const limit = ref(0)
const role = ref('')
const infoList = ref([])
const patentStatusOption = ref([])
const disabled = ref(false)
const stepList = ref([])
const fileUrl = ref('')
const fileUrlList = ref([])
const companyquerylist = ref({})
const activeName = ref('first')
const tableData = ref([])
const tableData1 = ref([])
const businessList = ref([])
const engineerlist = ref([])
const customerName = ref([])
const selectionList = ref([])
const isBatchProcessing = ref(false)
const queryParam = ref({})
const ids = ref([])
const editVisible = ref(false)
const btnLoad = ref(false)
const updateDialogVisible = ref(false)
const updateDialogVisible1 = ref(false)
const auditVisible = ref(false)
const matchVisible = ref(false)
const updateDialogTitle = ref('新增')
const customerlist = ref([])
const { proxy } = getCurrentInstance()
const { sys_patent_status, patent_file_type, sys_case_type } = useDict(
  'sys_proceeds_time',
  'sys_pay_status',
  'sys_patent_status',
  'sys_case_show',
  'patent_file_type',
  'sys_case_type',
)
const auditForm = ref({
  patentId: '',
  auditStatus: '1',
  auditSuggest: '',
})
// 分配表单
const allotForm = ref({
  patentId: '',
  contractId: '',
  engineerId: '',
})
// 查询
const attachmentForm = ref({
  patentId: '',
  fileType: '',
})
// 上传表单
const uploadForm = ref({
  patentId: '',
  fileType: '',
  fileList: [],
  file: '',
})
// 修改表单
const editForm = ref({
  reelNumber: '',
  patentId: '',
  contractNo: '',
  customerId: '',
  contractId: '',
  patentName: '',
  patentType: '',
  businessName: '',
  status: '',
  remark: '',
  engineerId: '',
  submitcompanyId: '',
  patentpersonId: [],
  caseType: '',
  patentLinkman: '',
  linkmanMail: '',
  linkmanPhone: '',
  inventorList: [],
  certificateNumber: '',
  applicationNumber: '',
  applicationTime: '',
})
const roleId = ref('')
const myId = ref('')
const nickName = ref('')
const roleGroup = ref('')
const postGroup = ref('')
const patentId = ref('')
// 搜索
const searchConfig = reactive([
  {
    label: '合同编号',
    field: 'contractNo',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '客户名称',
    field: 'customerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: customerlist,
      label: 'customerName',
      value: 'customerId',
      key: 'customerId',
    },
  },
  {
    label: '案件编号',
    field: 'reelNumber',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '案件名称',
    field: 'patentName',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '业务类型',
    field: 'businessId',
    type: 'select',
    defaultShow: true,
    options: {
      data: businessList,
      label: 'businessName',
      value: 'businessId',
      key: 'businessId',
    },
  },
  {
    label: '状态',
    field: 'status',
    type: 'custom',
    defaultShow: true,

  },
  {
    label: '分配人员',
    field: 'engineerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: engineerlist,
      label: 'userName',
      value: 'userId',
      key: 'userId',
    },
  },
  {
    label: '备注',
    field: 'remark',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '申请日期',
    field: 'applicationTime',
    type: 'daterange',
    defaultShow: true,
  },
  {
    label: '专利申请号',
    field: 'applicationNumber',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '专利号',
    field: 'certificateNumber',
    type: 'input',
    defaultShow: true,
  },
  {
    label:'专利权人',
    field: 'patentpersonId',
    type: 'select',
    options: {
      data: customerlist,
      label: 'customerName',
      value: 'customerId',
    }
  }
])
// 表格
const tableColumns = reactive([
  { type: 'checkbox', width: 50 },

  {
    field: 'customerName',
    title: '客户名称',
    align: 'center',
    minWidth: 220,
    showOverflow: 'tooltip',
  },
  {
    field: 'contractNo',
    title: '合同编号',
    align: 'center',
    minWidth: 140,
    showOverflow: 'tooltip',
  },
  {
    field: 'reelNumber',
    title: '案件编号',
    align: 'center',
    minWidth: 140,
    showOverflow: 'tooltip',
  },
  {
    field: 'patentName',
    title: '案件名称',
    align: 'center',
    minWidth: 220,
    showOverflow: 'tooltip',
  },
  {
    field: 'businessName',
    title: '业务类型',
    align: 'center',
    minWidth: 120,
    showOverflow: 'tooltip',
  },
  {
    field: 'status',
    title: '状态',
    align: 'center',
    minWidth: 100,
    slots: { default: 'status' },
  },
  {
    field: 'userName',
    title: '分配人员',
    align: 'center',
    minWidth: 120,
    showOverflow: 'tooltip',
  },
  {
    field: 'applicationTime',
    title: '申请日期',
    align: 'center',
    minWidth: 140,
    showOverflow: 'tooltip',
  },
  {
    field: 'applicationNumber',
    title: '专利申请号',
    align: 'center',
    minWidth: 140,
    showOverflow: 'tooltip',
  },
  {
    field: 'certificateNumber',
    title: '专利号',
    align: 'center',
    minWidth: 140,
    showOverflow: 'tooltip',
  },
  {
    field: 'patentPerson',
    title: '专利权人',
    align: 'center',
    minWidth: 100,
  },
  {
    field: 'remark',
    title: '备注',
    align: 'center',
    minWidth: 150,
    showOverflow: 'tooltip',
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    minWidth: 200,
    fixed: 'right',
    slots: { default: 'operate' },
  },
])
// 发明人表格
const inventorColumns = reactive([
  {
    field: 'inventorName',
    title: '名称',
    align: 'center',
    slots: { default: 'inventorName' },
  },
  {
    field: 'inventorIdentity',
    title: '身份证号码/护照/台胞证编号',
    align: 'center',
    slots: { default: 'inventorIdentity' },
  },
  {
    field: 'inventorOrder',
    title: '顺序',
    align: 'center',
    slots: { default: 'inventorOrder' },
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    width: 200,
    slots: { default: 'operate' },
  },
])
// 上传表格
const uploadColumns = reactive([
  {
    field: 'fileName',
    title: '文件名称',
    align: 'center',
    showOverflow: 'tooltip',
    minWidth: 200,
  },
  {
    field: 'fileType',
    title: '类型',
    align: 'center',
    slots: { default: 'fileType' },
    showOverflow: 'tooltip',
    minWidth: 150,
  },
  {
    field: 'nickName',
    title: '上传人',
    align: 'center',
    showOverflow: 'tooltip',
    minWidth: 100,
  },
  {
    field: 'createTime',
    title: '上传日期',
    align: 'center',
    width: 160,

  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    width: 180,
    slots: { default: 'operate' },
  },
])
const updateFormList = ref([
  {
    label: '分配人员',
    field: 'engineerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: engineerlist,
      label: 'userName',
      value: 'userId',
      key: 'userId',
    },
    rules: [{ required: true, message: '请选择客户名称', trigger: 'blur' }],
    span: 24,
  },
])
const updateFormModel = ref({})
const tabsList = reactive([
  {
    label: '基本信息',
    name: 'first',
    icon: 'tab-first',
    id: 1,
  },
  {
    label: '流程信息',
    name: 'second',
    icon: 'tab-second',
    id: 2,
  },
  {
    label: '附件',
    name: 'third',
    icon: 'tab-third',
    id: 3,
  },
])
const rules = {
  // 分配
  engineerId: [
    { required: true, message: '分配人员不能为空', trigger: 'blur' },
  ],
  // 审核
  auditStatus: [
    { required: true, message: '审核状态不能为空', trigger: 'blur' },
  ],
  auditSuggest: [
    { required: true, message: '审核意见不能为空', trigger: 'blur' },
  ],
  // 上传
  fileType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  file: [{ required: true, message: '上传文件不能为空', trigger: 'blur' }],
  patentStatus: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  // 新增修改
  reelNumber: [
    { required: true, message: '案件编号不能为空', trigger: 'blur' },
  ],
  contractNo: [
    { required: true, message: '合同编号不能为空', trigger: 'blur' },
  ],
  customerId: [
    { required: true, message: '客户名称不能为空', trigger: 'blur' },
  ],
  patentName: [
    { required: true, message: '案件名称不能为空', trigger: 'blur' },
  ],
  businessName: [
    { required: true, message: '业务名称不能为空', trigger: 'blur' },
  ],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
  engineerId: [
    { required: true, message: '分配人员不能为空', trigger: 'blur' },
  ],
  submitcompanyId: [
    { required: true, message: '递交端口不能为空', trigger: 'blur' },
  ],
  patentpersonId: [
    { required: true, message: '专利权人不能为空', trigger: 'blur' },
  ],
  caseType: [{ required: true, message: '案件方式不能为空', trigger: 'blur' }],
  patentLinkman: [
    { required: true, message: '专利联系人不能为空', trigger: 'blur' },
  ],
  linkmanMail: [
    {
      required: true,
      message: '专利联系人邮箱不能为空',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
  linkmanPhone: [
    {
      required: true,
      message: '专利联系人电话不能为空',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
  applicationNumber: [
    { required: true, message: '专利申请号不能为空', trigger: 'blur' },
  ],
  applicationTime: [
    { required: true, message: '申请日期不能为空', trigger: 'blur' },
  ],
  certificateNumber: [
    { required: true, message: '专利号不能为空', trigger: 'blur' },
  ],
}
const sc = ref({
  fileType: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
  file: [{ required: true, message: '上传文件不能为空', trigger: 'blur' }],
  patentStatus: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
})

const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  customerId: '',
})

// 上传状态筛选
const filteredOptions = computed(() => {
  return sys_patent_status.value.filter((dict, index) => {
    return (
      index > newRowStatus.value
      && dict.value !== '19'
      && dict.value !== '20'
      && dict.value !== '17'
      && dict.value !== '10'
      && dict.value !== '15'
      && dict.value !== '16'
    )
  })
})

// 上传类型筛选
const handleIncludePatentType = computed(() => {
  return patent_file_type.value.filter((dict, index) => {
    return patentStatusOption.value.includes(dict.value)
  })
})
const filteredStatusOptions = computed(() => sys_patent_status.value.slice(7))

onMounted(() => {
  getList()
  getUser()
})
// 获取用户信息
function getUser() {
  userServices.getUserProfile().then((response) => {
    console.log(response)
    roleId.value = response.data.user.roles[0].roleId
    role.value = response.data.user.roles[0].roleKey
    console.log(roleId.value, 'roleId')
    myId.value = response.data.user.userId
    console.log(myId.value, 'myId')
    // this.nickName = response.data.user.nickName;
    nickName.value = response.data.user.userName
    console.log(nickName.value, 'nickname')
    roleGroup.value = response.data.roleGroup
    console.log(roleGroup.value, 'roleGroup')
    postGroup.value = response.data.postGroup
    console.log(postGroup.value, 'postGroup')
  })
}
// 列表
function getList() {
  const formData = {
    ...queryParam.value,
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
  }
  btnLoad.value = true
  patentService.list(formData).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
    btnLoad.value = false
  })
  fundPoolService.optionList().then((res) => {
    customerlist.value = res.data
  })
  caseService.listBusiness().then((response) => {
    businessList.value = response.rows
  })
  caseService.EngineerList().then((response) => {
    engineerlist.value = response.data
  })
  caseService.CompanyQueryList().then((response) => {
    companyquerylist.value = response.data
  })
}

// 分页
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange({ checked, records, reserves }) {
  selectionList.value = records
  const res = records.map(item => item.patentId)
  if (reserves.length > 0) {
    if (checked) {
      ids.value.push(...res)
    }
    else {
      const customerIdSet = new Set(reserves.map(item => item.customerId))
      ids.value = ids.value.filter(item => customerIdSet.has(item))
    }
  }
  else {
    ids.value = res
  }
}

// 去除日期时分秒
function removeTime(date) {
  const newDate = new Date(date)
  newDate.setHours(0, 0, 0, 0) // 参数依次为小时、分钟、秒、毫秒
  return newDate.toISOString().split('T')[0] // 使用ISO格式，然后分割字符串取日期部分
}

// 搜索
function handleSearch(e, type) {
  if (type === 'reset') {
    status.value = ''
  }
  queryParam.value = {
    status: status.value,
    beginApplicationTime: e.applicationTime
      ? `${removeTime(e.applicationTime[0])}`
      : null,
    endApplicationTime: e.applicationTime
      ? `${removeTime(e.applicationTime[1])}`
      : null,
    ...e,
  }
  delete queryParam.value.applicationTime
  console.log(e)
  getList()
}

function handleReset() {
  updateDialogVisible.value = false
  updateDialogVisible1.value = false
  // auditFormRef.value.resetFields()
  //   updateDialogTitle.value = "新增";
}
// 批量分配
function handleBatchAllocation() {
  updateFormModel.value = []
  isBatchProcessing.value = true
  updateDialogVisible.value = true
  updateDialogTitle.value = '分配'
}

/** 分配 */
function handleAllot(row) {
  isBatchProcessing.value = false
  allotForm.value.patentId = row.patentId
  allotForm.value.contractId = row.contractId
  updateDialogVisible.value = true
  updateDialogTitle.value = '分配'
}

/** 分配提交 */
function allotSubmitForm() {
  if (allotForm.value.patentId != null) {
    console.log(allotForm.value, 'allotForm.value')
    if (isBatchProcessing.value) {
      const params = {
        patentIds: ids.value.join(','),
        engineerId: allotForm.value.engineerId,
      }
      caseService
        .allocationBatch(params)
        .then((response) => {
          if (response.code === 200) {
            Message.success('批量分配成功')
            updateDialogVisible.value = false
            getList()
          }
        })
        .finally(() => {})
    }
    else {
      console.log(allotForm.value, 'allotForm.value')
      caseService
        .Allot(allotForm.value)
        .then((response) => {
          if (response.code === 200) {
            Message.success('分配成功')
            updateDialogVisible.value = false
            getList()
          }
        })
        .finally(() => {})
    }
  }
  else {
    updateDialogVisible.value = false
  }
}

function getMatchList() {
  console.log('666')
  pagerConfig.value.customerId = selectionList.value[0].customerId
  zlPromptService.list(pagerConfig.value).then((response) => {
    tableData1.value = response.rows
  })
  //   CustomerQueryList().then(response => {
  //     this.customerlist = response.data
  //   })
}

// 文件类型
function fileTypeChange() {
  if (uploadForm.value.fileType === '1') {
    fileType.value = ['docx', 'zip']
    limit.value = 1
  }
  else if (uploadForm.value.fileType === '2') {
    fileType.value = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'txt', 'pdf', 'zip']
    isFileType.value = 2
    limit.value = 10
  }
  else {
    fileType.value = ['pdf']
    limit.value = 1
  }
}

// 选择文件
function handleUploadInput(_val) {}

// 附件
function handleQueryAtt() {
  caseService.attachmentQuery(attachmentForm.value).then((res) => {
    const { rows } = res
    infoList.value = rows
  })
}
// 取消
function cancel() {
  auditForm.value = {
    remark: '',
    status: '',
    cwbankcollectionId: '',
  }
  matchVisible.value = false
  auditVisible.value = false
  editVisible.value = false
  updateDialogVisible.value = false
}
// 关闭文件
function cancelFile() {
  if (uploadDisabled.value) {
    editVisible.value = false
  }
  uploadVisible.value = false
  scFormRef.value.resetFields()
}
// 上传文件
function handleUpload(type, row) {
  uploadForm.value.file = ''
  console.log(role.value, '上传文件')
  uploadVisible.value = true
  uploadDisabled.value = type != 2
  uploadForm.value.patentId = editForm.value.patentId
  patentStatusOption.value = []
  // engineer:工程师 engineerManager:工程师组长 business:业务员 processPersonnel:流程人员
  if (role.value == 'engineer' || role.value == 'engineerManager') {
    uploadForm.value.fileType = '1'
    patentStatusOption.value = ['1', '2']
    console.log(patentStatusOption.value, 'patentStatusOption.value')
  }
  else if (role.value == 'business') {
    uploadForm.value.fileType = '2'
    patentStatusOption.value = [
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
    ]
  }
  else if (
    role.value == 'processPersonnel'
    && (type == 1 || type == 2 || type == 3)
  ) {
    console.log(type, 'type3')

    if (rowStatus.value == 6) {
      uploadForm.value.fileType = '3'
    }
    else if (rowStatus.value == 7) {
      uploadForm.value.fileType = '4'
    }
    else if (rowStatus.value == 8) {
      uploadForm.value.fileType = '4'
    }
    else if (rowStatus.value == 10) {
      uploadForm.value.fileType = '5'
    }
    else if (rowStatus.value == 18) {
      uploadForm.value.fileType = '6'
    }
    else if (
      rowStatus.value == 9
      || rowStatus.value == 11
      || rowStatus.value == 19
    ) {
      if (type == 3) {
        uploadForm.value.fileType = '8'
      }
      else if (first.value == 1) {
        uploadForm.value.fileType = '6'
      }
      else {
        uploadForm.value.fileType = '7'
      }
    }
    else if (rowStatus.value == 12) {
      uploadForm.value.fileType = '8'
    }
    else if (rowStatus.value == 13) {
      uploadForm.value.fileType = '9'
    }
    else if (rowStatus.value == 14) {
      uploadForm.value.fileType = '10'
    }
    patentStatusOption.value = [
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
    ]
  }
  else if (role.value == 'processPersonnel' && (type == 3 || type == 4)) {
    // console.log(String(Number(row.status)+1),'status');
    // this.uploadForm.patentStatus=String(Number(row.status)+1)
    uploadForm.value.patentStatus = row.status
    console.log(row.status, 'status')
    console.log(rowStatus.value, 'rowstatus')
    if (rowStatus.value == 7) {
      uploadForm.value.patentStatus = '7'
      uploadForm.value.fileType = '3'
    }
    else if (rowStatus.value == 8) {
      uploadForm.value.patentStatus = '8'
      uploadForm.value.fileType = '4'
    }
    else if (rowStatus.value == 18) {
      uploadForm.value.patentStatus = '18'
      uploadForm.value.fileType = '5'
    }
    else if (
      rowStatus.value == 9
      || rowStatus.value == 19
      || rowStatus.value == 20
    ) {
      uploadForm.value.patentStatus = '9'
      uploadForm.value.fileType = '6'
    }
    else if (
      rowStatus.value == 10
      || rowStatus.value == 11
      || rowStatus.value == 17
    ) {
      uploadForm.value.patentStatus = '11'
      uploadForm.value.fileType = '7'
    }
    else if (rowStatus.value == 12) {
      uploadForm.value.patentStatus = '12'
      uploadForm.value.fileType = '8'
    }
    else if (rowStatus.value == 13) {
      uploadForm.value.patentStatus = '13'
      uploadForm.value.fileType = '9'
    }
    else if (rowStatus.value == 14) {
      uploadForm.value.patentStatus = '14'
      uploadForm.value.fileType = '10'
    }
    patentStatusOption.value = [
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
    ]
  }
  if (uploadForm.value.fileType == '1') {
    fileType.value = ['docx', 'zip']
    limit.value = 1
    isFileType.value = 1
  }
  else if (uploadForm.value.fileType == '2') {
    fileType.value = [
      'doc',
      'docx',
      'xls',
      'xlsx',
      'ppt',
      'txt',
      'pdf',
      'zip',
      'jpg',
      'png',
    ]
    isFileType.value = 2
    limit.value = 10
  }
  else {
    fileType.value = ['pdf']
    isFileType.value = 1
    limit.value = 1
  }
}
// 选择文件
function selectStatus() {
  if (uploadForm.value.patentStatus == 7) {
    uploadForm.value.fileType = '3'
  }
  else if (uploadForm.value.patentStatus == 8) {
    uploadForm.value.fileType = '4'
  }
  else if (uploadForm.value.patentStatus == 18) {
    uploadForm.value.fileType = '5'
  }
  else if (
    uploadForm.value.patentStatus == 9
    || uploadForm.value.patentStatus == 19
    || uploadForm.value.patentStatus == 20
  ) {
    uploadForm.value.fileType = '6'
  }
  else if (
    uploadForm.value.patentStatus == 10
    || uploadForm.value.patentStatus == 11
    || uploadForm.value.patentStatus == 17
  ) {
    uploadForm.value.fileType = '7'
  }
  else if (uploadForm.value.patentStatus == 12) {
    uploadForm.value.fileType = '8'
  }
  else if (uploadForm.value.patentStatus == 13) {
    uploadForm.value.fileType = '9'
  }
  else if (uploadForm.value.patentStatus == 14) {
    uploadForm.value.fileType = '10'
  }
  patentStatusOption.value = [
    '2',
    '3',
    '4',
    '5',
    '6',
    '7',
    '8',
    '9',
    '10',
    '11',
  ]
}
// 业务员列表
function ywyList(customerInformationId) {
  customerInformationService
    .getDetail(customerInformationId)
    .then((response) => {
      dutyId.value = response.data.dutyId
      if (response.data.secDutyId) {
        secDutyId.value = response.data.secDutyId
      }
    })
}

// 查看  修改
function handleUpdate(row, type) {
  if (type === 4) {
    isStatus.value = 4
    disabled.value = true
    sctitle.value = '更新状态'
    uploadForm.value.patentStatus = row.status
    if (
      (row.patentType === '1798631332965748738'
      || row.patentType === '1796024658129670146')
      && row.status === '7'
    ) {
      newRowStatus.value = 9
    }
    else if (uploadForm.value.patentStatus === 7) {
      newRowStatus.value = 7
    }
    else if (uploadForm.value.patentStatus === 8) {
      newRowStatus.value = 8
    }
    else if (uploadForm.value.patentStatus === 18) {
      newRowStatus.value = 9
    }
    else if (
      uploadForm.value.patentStatus === 9
      || uploadForm.value.patentStatus === 19
      || uploadForm.value.patentStatus === 20
    ) {
      newRowStatus.value = 11
    }
    else if (
      uploadForm.value.patentStatus === 10
      || uploadForm.value.patentStatus === 11
      || uploadForm.value.patentStatus === 17
    ) {
      newRowStatus.value = 14
    }
    else if (uploadForm.value.patentStatus === 12) {
      newRowStatus.value = 16
    }
    else if (uploadForm.value.patentStatus === 13) {
      newRowStatus.value = 17
    }
    else if (uploadForm.value.patentStatus === 14) {
      newRowStatus.value = 18
    }
  }
  if (type === 2) {
    isStatus.value = 0
    disabled.value = true
    updateDialogTitle.value = '查看'
  }
  else if (type === 1 || type === 3) {
    isStatus.value = 0
    updateDialogTitle.value = '修改'
    disabled.value = false
    if (type === 1) {
      sctitle.value = '上传'
    }
    else {
      sctitle.value = '授权'
    }
  }
  customerId.value = row.customerId
  ywyList(customerId.value)
  patentId.value = row.patentId
  gcsId.value = row.engineerId
  activeName.value = type === 2 ? 'first' : 'third'
  patentService
    .getPatent(patentId.value)
    .then((response) => {
      const { data, code } = response
      assignPersonnel.value = data.nickName
      fileUrlList.value = data.sysPatentFileList

      if (code === 200) {
        // 基本信息
        for (const val in editForm.value) {
          editForm.value[val] = data[val]
          if (
            (editForm.value.patentType === '1798631332965748738'
            || editForm.value.patentType === '1796024658129670146')
            && editForm.value.status === '18'
          ) {
            editForm.value.status = '7'
          }
        }
        editForm.value.patentpersonId = response.data.patentpersonId.split(',')
        editForm.value.inventorList = editForm.value.inventorList
          ? editForm.value.inventorList
          : data.inventorVoList
        stepList.value = data.flowRecordVoList ? data.flowRecordVoList : []
        stepList.value.forEach((item, _index) => {
          if (!item.auditStatus || item.auditStatus === 1) {
            item.status = 'success'
          }
          else {
            item.status = 'error'
          }
        })

        // 附件
        infoList.value = data.sysPatentFileList ? data.sysPatentFileList : []
        attachmentForm.value.patentId = patentId.value
        infoList.value.forEach((item, index) => {
          if (item.updateTime) {
            item.createTime = item.updateTime
          }
        })
        editVisible.value = true
        if (type === 1 || type === 4 || type === 3) {
          console.log(123)
          setTimeout(() => {
            handleUpload(type, row)
          }, 100)
        }
        if (
          row.patentType === '1798631332965748738'
          || row.patentType === '1796024658129670146'
        ) {
          console.log(row.status, '099')
          if (row.status === 18) {
            first.value = 1
            rowStatus.value = 9
          }
          else if (row.status === 9 || row.status === 19 || row.status === 20) {
            rowStatus.value = 11
          }
          else if (row.status === 10 || row.status === 11 || row.status === 17) {
            rowStatus.value = 12
          }
          else if (row.status === 7) {
            rowStatus.value = 8
          }
          else {
            rowStatus.value = Number(row.status) + 1
          }
        }
        else {
          if (row.status === 9 || row.status === 19 || row.status === 20) {
            rowStatus.value = 11
          }
          else if (row.status === 10 || row.status === 11 || row.status === 17) {
            rowStatus.value = 12
          }
          else if (row.status === 8) {
            rowStatus.value = 10
          }
          else {
            rowStatus.value = Number(row.status) + 1
            first.value = 1
          }
        }
        // rowStatus.value = row.status;
      }
    })

    .catch((_err) => {})
}

// 校验表格名称或身份证存在两者必须存在
function verificationTableExists() {
  const list = []
  for (let i = 0; i < editForm.value.inventorList.length; i++) {
    if (
      editForm.value.inventorList[i].inventorIdentity === ''
      && editForm.value.inventorList[i].inventorName != ''
    ) {
      Message.warning('请填写身份证号码/护照/台胞证编号!')
      return false
    }
    if (
      editForm.value.inventorList[i].inventorIdentity != ''
      && editForm.value.inventorList[i].inventorName === ''
    ) {
      Message.warning('请填写名称!')
      return false
    }

    list.push(editForm.value.inventorList[i].inventorOrder)
    if (
      (editForm.value.inventorList[i].inventorIdentity
      || editForm.value.inventorList[i].inventorName)
      && isDele.value == false
    ) {
      for (let j = 0; j < list.length; j++) {
        if (list.indexOf(list[j]) !== list.lastIndexOf(list[j])) {
          Message.warning('顺序不可重复!')
          return false
        }
      }
    }
  }
  return true
}

// 提交修改
async function editSubmitForm(_e) {
  if (updateDialogTitle.value == '查看') {
    editVisible.value = false
    return false
  }
  const verification = await verificationTableExists()
  if (!verification) {
    return false
  }
  // 发明人信息校验（不可为空）
  const VoList = editForm.value.inventorList.flat()
  VoList.forEach((_item) => {
    for (let i = 0; i < editForm.value.inventorList.length; i++) {
      if (
        (!editForm.value.inventorList[i].inventorIdentity
        && !editForm.value.inventorList[i].inventorName
        && editForm.value.inventorList[i].delFlag == '0')
        || (!editForm.value.inventorList[i].inventorIdentity
        && !editForm.value.inventorList[i].inventorName
        && !editForm.value.inventorList[i].inventorId)
      ) {
        editForm.value.inventorList.splice(i, 1)
      }
    }
  })
  caseService
    .updatePatent(editForm.value)
    .then((response) => {
      if (response.code == 200) {
        Message.success('修改成功')
        editVisible.value = false
        getList()
      }
    })
    .finally(() => {})
}

// 提交上传文件
function uploadSubmitForm() {
  scFormRef.value.validate((valid) => {
    if (valid) {
      // 文件是否重复   附件10 其他1
      if (isStatus.value === 3 || isStatus.value === 4) {
        uploadForm.value.fileList = []
        const temp = uploadForm.value.file.split(',')
        const params = {
          fileId: null,
          ossId: '',
          delFlag: 0,
        }
        temp.forEach((item, index) => {
          console.log(item, index)
          params.ossId = item
          uploadForm.value.fileList.push(params)
        })
        patentService
          .updateStatusByFile(uploadForm.value)
          .then((res) => {
            const code = res.code
            if (code === 200) {
              Message.success('上传成功!')
              getList()
              uploadVisible.value = false
              editVisible.value = false
              handleQueryAtt()
            }
            if (code === 1001) {
              ElMessageBox.prompt('请输入登记费开始年度', '提示', {
                inputType: 'number',
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputValue: '',
                //   非空校验
                inputValidator: (value) => {
                  if (!value) {
                    return '请输入登记费开始年度'
                  }
                },
              }).then((res) => {
                uploadForm.value.reduceStartYear = res.value
                Message.success('登记成功,请重新更新状态')
              })
            }
          })
          .catch((res) => {
            console.log(res)
          })
      }
      else {
        const temp = infoList.value.reduce((pre, cur, index, arr) => {
          console.log(index, 'index')
          if (pre[cur.fileType]) {
            pre[cur.fileType]++
          }
          else {
            pre[cur.fileType] = 1
          }
          return pre
        }, {})
        if (uploadForm.value.fileType == 2) {
          if (temp[uploadForm.value.fileType] >= 10) {
            confirmFile()
          }
          else {
            submitFile()
          }
        }
        else {
          if (temp[uploadForm.value.fileType]) {
            confirmFile()
          }
          else {
            submitFile()
          }
        }
      }
    }
  })
}

function submitFile() {
  uploadForm.value.fileList = []
  const temp = uploadForm.value.file?.split(',')
  temp.forEach((item, index) => {
    const params = {
      fileId: null,
      ossId: item,
      delFlag: 0,
    }
    console.log(params, 'ossid')
    uploadForm.value.fileList.push(params)
  })
  if (!uploadForm.value.file) {
    Message.warning('请选择文件！', 0, { zIndex: 999 })
  }
  else {
    caseService
      .updateFileAndInfo(uploadForm.value)
      .then((res) => {
        if (res.code == 200) {
          Message.success('上传成功!')
          uploadVisible.value = false
          editVisible.value = false
          handleQueryAtt()
          getList()
        }
      })
      .catch((res) => {
        console.log(res)
      })
  }
}

function confirmFile() {
  useMessageBox({
    title: '',
    description: `当前类型文件已存在，是否覆盖？`,
    icon: 'warring',
  })
    .then(() => {
      submitFile()
    })
    .catch((res) => {
      Message.info('已取消上传')
    })
}

// 撤回
function handleReject(row) {
  patentId.value = row.patentId
  useMessageBox({
    title: '',
    description: `是否确定撤回`,
    icon: 'withdrawdrug',
  })
    .then(() => {
      patentService.withdraw({ patentId: patentId.value }).then((res) => {
        if (res.code == 200) {
          Message.success('撤回成功')
          getList()
        }
      })
    })
    .catch((res) => {})
}

// 新增基本信息
function handleAddInfo() {
  const cell = {
    inventorName: '',
    inventorIdentity: '',
    inventorOrder: '',
  }
  editForm.value.inventorList.push(cell)
}

// 删除
function handleDeleteInfo(data, index) {
  console.log(data, 99)
  // this.$nextTick(() => {
  // this.editForm.inventorList.splice(index, 1);
  editForm.value.inventorList[index].inventorName = ''
  editForm.value.inventorList[index].inventorIdentity = ''
  editForm.value.inventorList[index].inventorOrder = ''
  editForm.value.inventorList[index].delFlag = '2'
  isDele.value = false
  // });
}

// 审核
function handleAudit(id) {
  auditVisible.value = true
  updateDialogTitle.value = '审核'
  auditForm.value.patentId = id
  auditVisible.value = true
}

// 提交审核
function auditSubmitForm() {
  console.log(auditForm.value, 'auditForm')
  caseService
    .Audit(auditForm.value)
    .then((response) => {
      if (response.code == 200) {
        Message.success('审核成功')
        getList()
      }
    })
    .catch((_res) => {})
}

// 导出
function handleExport() {
  proxy.download(
    '/system/patent/zl/export',
    { ...queryParam.value, exportIds: ids.value.join(',') },
    `patent_${new Date().getTime()}.xlsx`,
  )
}

// 下载
function handleDownloadAtt(row) {
  console.log(row, 'ossid')
  proxy.$download.oss(row.ossId)
}

// 删除
function handleDeleteAtt(row) {
  console.log(row)
  const fileId = row.fileId
  useMessageBox({
    title: '',
    description: `是否确认删除文件`,
    icon: 'checksurface',
  })
    .then(() => {
      return caseService.attachmentDelete(fileId).then((res) => {
        console.log(res, fileId)
      })
    })
    .then((res) => {
      handleQueryAtt()
      Message.success('删除成功')
      handleUpdate(row, 3)
    })
    .finally((res) => {})
}

// 控制文件预览显示
function FilePreviewDialogHandle(row) {
  const extension = row.filePath.split('.').pop().toLowerCase()
  fileSuffix.value = extension
  console.log(extension, 111)
  if (extension == 'pdf' || extension == 'txt') {
    fileUrl.value = row.filePath
  }
  else if (extension == 'zip') {
    window.open(`/get-file-endpoint/${row.filePath}`, '_blank')
  }
  else {
    fileUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${row.filePath}`
  }
  fileVisible.value = true
}

function handleOpen() {
  // 对话框打开时自动设置初始大小
  isFullScreen.value = false
}
function toggleFullScreen() {
  isFullScreen.value = !isFullScreen.value
}

// 已交局
function openHandleBureau(row) {
  patentId.value = row.patentId
  useMessageBox({
    title: '',
    description: `是否确定已交局`,
    icon: 'checksurface',
  }).then(() => {
    patentService.addStatusToYjj({ patentId: patentId.value }).then((res) => {
      if (res.code == 200) {
        Message.success('已交局成功')
        getList()
      }
      reviewVisible1.value = false
    })
  })
}

// 授权按钮
function empowerButton(row) {
  return row.status == '9' || row.status == '11' || row.status == '18'
}
// 上传按钮
function uploadButton(row) {
  return (
    (roleGroup.value == '流程人员'
    && row.status != '10'
    && row.status != '17'
    && row.status != '19'
    && row.status != '20'
    && row.status != '14'
    && row.status != '15')
    || ((row.status == '17' || row.status == '19') && myId.value == row.engineerId)
  )
}
// 撤回按钮
function withdrawButton(row) {
  return (
    roleGroup.value == '流程人员' && row.status != '14' && row.status != '15'
  )
}
// 更新状态按钮
function renewButton(row) {
  return (
    roleGroup.value == '流程人员' && row.status != '14' && row.status != '15'
  )
}
// 已交局按钮
function bureauButton(row) {
  return (
    roleGroup.value == '流程人员' && (row.status == '20' || row.status == '10')
  )
}
// 更多
function isMore(row) {
  return (
    roleGroup.value !== '业务员'
    || (roleGroup.value == '流程人员' && row.status == '14')
    || (roleGroup.value == '工程师' && (row.status == '17' || row.status == '19'))
    || roleGroup.value == '工程师组长'
  )
}

function handleActiveName(name) {
  activeName.value = name
  lc.value = !lc.value
}

function handleDealNoRegisterInfoData(row) {
  ElMessageBox.prompt('请输入登记费开始年度', '提示', {
    inputType: 'number',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    inputPattern: /^[1-9]\d*$/,
    inputErrorMessage: '登记费开始年度不能为空且为正整数',
  }).then(({ value }) => {
    patentService.dealNoRegisterInfoData({
      patentId: row.patentId,
      reduceStartYear: value,
    }).then((res) => {
      if (res.code === 200) {
        Message.success('年费维护成功')
        getList()
      }
    })
  })
}

// 预览
function fileView(row) {
  return (
    row.filePath.split('.').pop().toLowerCase() === 'pdf'
    || row.filePath.split('.').pop().toLowerCase() === 'docx'
    || row.filePath.split('.').pop().toLowerCase() === 'png'
    || row.filePath.split('.').pop().toLowerCase() === 'jpg'
  )
}
// 下载
function fileDelete(row) {
  return (
    ((dutyId.value === myId.value || secDutyId.value === myId.value) && row.fileType === '2' && row.isDelFileRole === '1')
    || (gcsId.value === myId.value && row.fileType === '2' && row.isDelFileRole === '1')
    || (row.fileType === '2' && row.isDelFileRole === '1')
  )
}

function handleResetAtt(row) {
  const patentId = row?.patentId
  console.log(patentId)
  patentService.resetPatent(patentId).then((res) => {
    const code = res.code
    if (code === 200) {
      Message.success('重置成功')
      getList()
    }
  })
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <SearchBar :search-config="searchConfig" @search="handleSearch">
        <template #status>
          <el-select
            v-model="status"
            placeholder="请选择状态"
            clearable
          >
            <el-option
              v-for="(dict, index) in filteredStatusOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </SearchBar>
    </el-card>
    <el-card shadow="never">
      <div class="toolbar flex mb-1">
        <div class="mb-2 space-x-3">
          <el-button
            v-hasPermi="['system:case:export']"
            type="warning"
            class="el-gradient-warning"
            @click="handleExport()"
          >
            导出
            <el-icon class="el-icon--right">
              <FolderAdd />
            </el-icon>
          </el-button>
          <el-button
            v-hasPermi="['system:case:edit']"
            type="warning"
            class="el-gradient-primary"
            :disabled="ids.length === 0"
            @click="handleBatchAllocation()"
          >
            批量分配
            <el-icon class="el-icon--right">
              <Edit />
            </el-icon>
          </el-button>
        </div>
        <RightToolbar />
      </div>
      <vxe-grid
        :row-config="{
          keyField: 'cwbankcollectionId',
        }"
        :data="tableData"
        :columns="tableColumns"
        :pager-config="pagerConfig"
        :column-config="{ resizable: true }"
        header-cell-class-name="headerCellClass"
        max-height="510px"
        class="mytable-scrollbar"
        @page-change="handlePageChange"
        @checkbox-all="handleCheckChange"
        @checkbox-change="handleCheckChange"
      >
        <template #status="{ row }">
          <dict-tag
            v-if="
              (row.patentType == '1798631332965748738'
                || row.patentType == '1796024658129670146')
                && row.status == '18'
            "
            :options="sys_patent_status"
            :value="7"
          />
          <dict-tag v-else :options="sys_patent_status" :value="row.status" />
        </template>
        <template #operate="{ row }">
          <el-button
            v-hasPermi="['system:patentinfo:query']"
            text
            type="success"
            size="small"
            @click="handleUpdate(row, 2)"
          >
            查看
          </el-button>
          <el-popover placement="bottom" :width="350" trigger="click">
            <template #reference>
              <el-button
                v-if="isMore(row)"
                text
                type="primary"
                size="small"
              >
                更 多
              </el-button>
            </template>

            <el-button
              v-hasPermi="['system:case:allot']"
              text
              type="primary"
              size="small"
              @click="handleAllot(row, 'view')"
            >
              分配
            </el-button>

            <el-button
              v-if="empowerButton(row)"
              v-hasPermi="['system:patentinfo:empower']"
              size="small"
              text
              type="primary"
              @click="handleUpdate(row, 3)"
            >
              授权
            </el-button>

            <el-button
              v-if="uploadButton(row)"
              v-hasPermi="['system:patentinfo:upload']"
              type="success"
              text
              size="small"
              @click="handleUpdate(row, 1)"
            >
              上传
            </el-button>
            <!-- <el-button
            v-hasPermi="['system:patentinfo:upload']"
            text
            type="success"
            size="small"
            :icon="UploadFilled"
            @click="handleUpdate(row, 1)"
            v-else-if="
              (row.status == '17' || row.status == '19') &&
              myId == row.engineerId
            "
          >
            上传
          </el-button> -->

            <el-button
              v-if="withdrawButton(row)"
              v-hasPermi="['system:patentinfo:withdraw']"
              text
              type="danger"
              size="small"
              @click="handleReject(row)"
            >
              撤回
            </el-button>

            <el-button
              v-if="renewButton(row)"
              v-hasPermi="['system:patentinfo:renew']"
              text
              type="success"
              size="small"
              @click="handleUpdate(row, 4)"
            >
              更新状态
            </el-button>

            <el-button
              v-if="bureauButton(row)"
              v-hasPermi="['system:patentinfo:bureau']"
              text
              type="primary"
              size="small"
              @click="openHandleBureau(row, 'edit')"
            >
              已交局
            </el-button>

            <el-button
              v-if="roleGroup === '流程人员' && (row.hasRegisterFile === '1')"
              v-hasPermi="['system:patent:dealNoRegisterInfoData']"
              size="small"
              type="primary"
              text
              @click="handleDealNoRegisterInfoData(row)"
            >
              年费维护
            </el-button>
            <span v-if="row.status !== '14'" v-hasPermi="['system:patent:resetPatent']">
              <el-popconfirm
                title="重置后流程至已分配状态，此流程是否确认重置？"
                width="200"
                @confirm="handleResetAtt(row)"
              >
                <template #reference>
                  <el-button
                    size="small"
                    type="primary"
                    text
                  >
                    重置
                  </el-button>
                </template>
              </el-popconfirm>
            </span>
          </el-popover>
        </template>
      </vxe-grid>
    </el-card>
    <!-- 分配 -->
    <el-dialog
      v-model="updateDialogVisible"
      :destroy-on-close="true"
      class="custom-dialog"
      width="500px"
      @close="cancel"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <BaseForm
        :field-list="updateFormList"
        :model="allotForm"
        class="px-5"
        @submit="allotSubmitForm"
        @cancel="cancel"
      />
    </el-dialog>

    <!-- 审核 -->
    <el-dialog
      v-model="auditVisible"
      :destroy-on-close="true"
      class="custom-dialog"
      draggable
      @close="handleReset"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <el-form
        ref="auditFormRef"
        :model="auditForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="是否通过" prop="auditStatus">
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio label="1">
              通过
            </el-radio>
            <el-radio label="0">
              不通过
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="审核意见" prop="auditSuggest">
          <el-input
            v-model="auditForm.auditSuggest"
            type="textarea"
            :rows="3"
            placeholder="请输入审核意见"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="auditSubmitForm">
            确 定
          </el-button>
          <el-button @click="handleReset">
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上传 -->
    <el-dialog
      v-model="uploadVisible"
      :title="sctitle"
      width="500px"
      style="margin-right: 17%"
      class="custom-dialog"
      :before-close="cancelFile"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ sctitle }}
          </span>
        </div>
      </template>
      <el-form
        ref="scFormRef"
        :model="uploadForm"
        label-width="60px"
        :rules="sc"
      >
        <el-form-item v-if="isStatus === 4" label="状态" prop="patentStatus">
          <el-select
            v-model="uploadForm.patentStatus"
            placeholder="请选择状态"
            clearable
            @change="selectStatus"
          >
            <el-option
              v-for="(dict, index) in filteredOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="类型" prop="fileType">
          <el-select
            v-model="uploadForm.fileType"
            clearable
            filterable
            placeholder="请选择类型"
            :disabled="uploadDisabled"
            @input="fileTypeChange"
          >
            <el-option
              v-for="item in handleIncludePatentType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件" prop="file">
          <file-upload
            v-model="uploadForm.file"
            :limit="limit"
            :is-file-type="isFileType"
            :file-type="fileType"
            @input="handleUploadInput"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="p-3 flex-center">
          <el-button type="primary" @click="uploadSubmitForm">
            确 定
          </el-button>
          <el-button @click="cancelFile()">
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 预览 -->
    <el-dialog
      v-model="fileVisible"
      :close-on-click-modal="false"
      :fullscreen="true"
      class="file-dialog"
      @open="handleOpen"
    >
      <!-- :style="
        !isFullScreen
          ? 'height:calc(100vh - 10px);overflow:hidden'
          : 'height:100%'
      " -->
      <!-- <FileViewer :file-suffix="fileSuffix" :file-url="fileUrl" /> -->
      <!-- <template #title>
        <span>
          <el-button text style="margin-left: auto" @click="toggleFullScreen()">
            {{ isFullScreen ? "退出全屏" : "全屏展示" }}
          </el-button>
        </span>
      </template> -->
      <iframe :src="fileUrl" frameborder="0" width="100%" height="100%" />
    </el-dialog>

    <!-- 查看 编辑 -->
    <el-drawer
      v-model="editVisible"
      :destroy-on-close="true"
      class="custom-drawer"
      :show-close="false"
      size="60%"
      @close="handleReset"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <div class="content-tabs mb-5">
        <ul class="flex">
          <li
            v-for="item in tabsList"
            :key="item.id"
            class="flex-1 text-center rounded h-13 flex-center text-[16px] tabs-item"
            :class="{ active: activeName === item.name }"
            @click="handleActiveName(item.name)"
          >
            <span>
              <SvgIcon
                :name="item.icon"
                class="tabs-icon"
                class-name="mr-1 w-[21px] h-[21px] relative top-[1px]"
              />
            </span>
            {{ item.label }}
          </li>
        </ul>
      </div>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'first'">
          <el-form
            ref="viewForm"
            :model="editForm"
            label-width="120px"
            :rules="rules"
            disabled
            class="mt-3"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="案件编号" prop="reelNumber">
                  <el-input
                    v-model="editForm.reelNumber"
                    placeholder="请输入案件编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同编号" prop="contractNo">
                  <el-input
                    v-model="editForm.contractNo"
                    placeholder="请输入合同编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称" prop="customerId">
                  <el-select
                    v-model="editForm.customerId"
                    filterable
                    clearable
                    placeholder="请选择客户"
                  >
                    <el-option
                      v-for="item in customerlist"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form label-width="120px">
                  <el-form-item label="案件名称" prop="patentName">
                    <el-input
                      v-model="editForm.patentName"
                      placeholder="请输入案件名称"
                      clearable
                      :disabled="disabled"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
              <el-col :span="8">
                <el-form-item label="业务类型" prop="businessName">
                  <el-input
                    v-model="editForm.businessName"
                    placeholder="请输入业务类型"
                    clearable
                    :disabled="disabled"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select
                    v-model="editForm.status"
                    placeholder="请选择状态"
                    clearable
                  >
                    <el-option
                      v-for="dict in sys_patent_status"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="分配人员" prop="engineerId">
                  <el-select
                    v-model="editForm.engineerId"
                    clearable
                    filterable
                    placeholder="请选择分配人员"
                  >
                    <el-option
                      v-for="item in engineerlist"
                      :key="item.userId"
                      :label="item.userName"
                      :value="item.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="专利权人" prop="patentpersonId">
                  <el-select
                    v-model="editForm.patentpersonId"
                    filterable
                    clearable
                    multiple
                    placeholder="请选择专利权人"
                  >
                    <el-option
                      v-for="item in customerlist"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form label-width="120px">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="editForm.remark"
                      type="textarea"
                      :rows="3"
                      placeholder="请输入备注"
                      maxlength="200"
                      show-word-limit
                      clearable
                      :disabled="disabled"
                      class="w-full"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <!-- 专利信息 -->
            <!-- <el-divider content-position="center">
            <span style="color: #0e6cff; font-size: 18px; font-weight: bold">
              专利信息
            </span>
          </el-divider> -->
            <div class="linear-header my-7">
              <span>专利信息</span>
            </div>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="递交端口" prop="submitcompanyId">
                  <el-select
                    v-model="editForm.submitcompanyId"
                    clearable
                    filterable
                    placeholder="请选择递交端口"
                  >
                    <el-option
                      v-for="item in companyquerylist"
                      :key="item.submitcompanyId"
                      :label="item.submitcompanyName"
                      :value="item.submitcompanyId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item label="案件方式" prop="caseType">
                  <el-select
                    v-model="editForm.caseType"
                    placeholder="请选择案件方式"
                    clearable
                  >
                    <el-option
                      v-for="dict in sys_case_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专利联系人电话" prop="linkmanPhone" label-width="121px">
                  <el-input
                    v-model="editForm.linkmanPhone"
                    placeholder="请输入专利联系人电话"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="专利联系人" prop="patentLinkman">
                  <el-input
                    v-model="editForm.patentLinkman"
                    placeholder="请输入专利联系人"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专利联系人邮箱" prop="linkmanMail" label-width="121px">
                  <el-input
                    v-model="editForm.linkmanMail"
                    placeholder="请输入专利联系人邮箱"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请日期" prop="applicationTime">
                  <el-input
                    v-model="editForm.applicationTime"
                    placeholder="请输入申请日期"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="专利申请号" prop="applicationNumber">
                  <el-input
                    v-model="editForm.applicationNumber"
                    placeholder="请输入专利申请号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="专利号" prop="certificateNumber">
                  <el-input
                    v-model="editForm.certificateNumber"
                    placeholder="请输入专利号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 发明人信息 -->
            <!-- <el-divider content-position="center">
            <span style="color: #0e6cff; font-size: 18px; font-weight: bold">
              发明人信息
            </span>
          </el-divider> -->
            <div class="linear-header my-7">
              <span>发明人信息</span>
            </div>
            <el-form label-width="120px">
              <div style="margin-bottom: 15px">
                <el-button
                  type="primary"
                  plain
                  :disabled="disabled"
                  @click="handleAddInfo"
                >
                  新增
                  <el-icon class="el-icon--right">
                    <Plus />
                  </el-icon>
                </el-button>
              </div>
              <vxe-grid
                :data="editForm.inventorList"
                :columns="inventorColumns"
                border
                header-cell-class-name="headerCellContractClass"
              >
                <template #inventorName="{ row }">
                  <el-input
                    v-model="row.inventorName"
                    placeholder="请输入名称"
                    :disabled="disabled"
                    clearable
                  />
                </template>
                <template #inventorIdentity="{ row }">
                  <el-input
                    v-model="row.inventorIdentity"
                    :disabled="disabled"
                    placeholder="请输入身份证号码/护照/台胞证编号"
                    clearable
                  />
                </template>
                <template #inventorOrder="{ row }">
                  <el-input-number
                    v-model="row.inventorOrder"
                    placeholder="请输入顺序"
                    :disabled="disabled"
                    clearable
                    :min="0"
                  />
                </template>
                <template #operate="{ row }">
                  <el-button
                    type="danger"
                    :disabled="disabled"
                    size="small"
                    @click="handleDeleteInfo(row, $index)"
                  >
                    删除
                  </el-button>
                </template>
              </vxe-grid>
            </el-form>
          </el-form>
        </div>
      </transition>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'second'">
          <el-steps

            v-if="stepList.length > 0"
            direction="vertical"
            :active="stepList.length"
            :align-center="true"
          >
            <el-step
              v-for="item in stepList"
              :key="item.recordId"
              :title="item.contractStatus"
              status="finish"
            >
              <template #icon>
                <div
                  class="rounded-full w-3 h-3 bg-[var(--el-color-primary)]"
                />
              </template>
              <template #title>
                <div style="display: flex;flex-direction: row-reverse;justify-content: flex-end;">
                  <span v-if="item.auditStatus" style="margin-left: 10px">[{{ item.auditStatus == 0 ? "不通过" : "通过" }}]</span>
                  <dict-tag
                    :options="sys_patent_status"
                    :value="item.contractStatus"
                  />
                </div>
              </template>
              <template #description>
                <div class="my-2 w-130">
                  <div
                    class="description-title flex bg-[var(--el-color-primary)] rounded text-white text-[14px] py-2 w-full"
                  >
                    <div class="flex-1 flex-center">
                      操作人
                    </div>
                    <div class="flex-1 flex-center">
                      审核意见
                    </div>
                    <div class="flex-1 flex-center">
                      操作时间
                    </div>
                  </div>
                  <div
                    class="description-item flex bg-[#E8F2FF] rounded text-black text-[14px] py-2 w-full"
                  >
                    <div class="flex-1 flex-center w-20">
                      {{ item.operUserNickName }} [{{ item.operUserName }}]
                    </div>
                    <div class="flex-1 flex-center">
                      {{ item.auditSuggest }}
                    </div>
                    <div class="flex-1 flex-center">
                      {{ item.operTime }}
                    </div>
                  </div>
                </div>
              <!--                <div> -->
              <!--                  <span>操作人：</span> -->
              <!--                  <span>{{ item.operUserNickName }} [{{ item.operUserName }}]</span> -->
              <!--                </div> -->
              <!--                <div v-if="item.auditSuggest"> -->
              <!--                  <span>审核意见：</span> -->
              <!--                  <span>{{ item.auditSuggest }}</span> -->
              <!--                </div> -->
              <!--                <span>{{ item.operTime }}</span> -->
              <!--                <div /> -->
              <!--              </div> -->
              </template>
            </el-step>
          </el-steps>
          <el-empty v-else :image-size="200" />
        </div>
      </transition>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'third'">
          <el-form
            ref="fileFormRef"
            class="file-form"
            :model="attachmentForm"
          >
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="类型" prop="fileType">
                  <el-select
                    v-model="attachmentForm.fileType"
                    clearable
                    filterable
                    placeholder="请选择类型"
                  >
                    <el-option
                      v-for="dict in patent_file_type"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-button type="primary" @click="handleQueryAtt">
                  查询
                  <el-icon class="el-icon--right">
                    <Search />
                  </el-icon>
                </el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-button
            type="primary"
            plain
            style="margin-bottom: 8px"
            :disabled="disabled"
            @click="handleUpload(2)"
          >
            上传
            <el-icon><UploadFilled /></el-icon>
          </el-button>
          <vxe-grid
            :data="infoList"
            :columns="uploadColumns"
            border
            header-cell-class-name="headerCellContractClass"
          >
            <template #fileType="{ row }">
              <dict-tag :options="patent_file_type" :value="row.fileType" />
            </template>

            <template #operate="{ row }">
              <el-button
                v-if="fileView(row)"
                text
                type="primary"
                size="small"
                @click="FilePreviewDialogHandle(row)"
              >
                预览
              </el-button>
              <el-button type="success" text size="small" @click="handleDownloadAtt(row)">
                下载
              </el-button>
              <el-button
                v-if="fileDelete(row)"
                size="small"
                type="danger"
                text
                @click="handleDeleteAtt(row)"
              >
                删除
              </el-button>
              <!-- <el-button
                v-else-if="
                  gcsId === myId
                    && row.fileType === '2'
                    && row.isDelFileRole === '1'
                "
                size="small"
                type="danger"
                text="danger"
                @click="handleDeleteAtt(row)"
              >
                删除
              </el-button>
              <el-button
                v-else-if="
                  row.fileType === '2' && row.isDelFileRole === '1'
                "
                size="small"
                type="danger"
                text
                @click="handleDeleteAtt(row)"
              >
                删除
              </el-button> -->
            </template>
          </vxe-grid>
        </div>
      </transition>
      <div class="close-btn flex-center" @click="cancel">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>
      <template #footer>
        <div class="flex-center mt-[20px]">
          <el-button type="primary" @click="editSubmitForm">
            确 定
          </el-button>
          <el-button @click="cancel">
            取 消
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<style scoped lang="scss">
.dialog-header {
  width: 180px;
  height: 0;
  border-width: 0px 45px 45px 0px;
  border-style: none solid solid;
  border-color: transparent transparent var(--el-color-primary);
  color: #fff;
  display: flex;
  justify-content: center;
}
.dialog-footer {
  padding: 0px 10px 20px 0;
}
::v-deep(.el-tabs__nav) {
  width: 100% !important;

  .el-tabs__item {
    width: 33%;
  }
}

::v-deep(.file-dialog) {
  .el-dialog {
    height: 100% !important;

    .el-dialog__header {
      height: 10px;
    }
  }
}
::v-deep(.el-dialog__body) {
  height: 90% !important;
}
.file-form {
  .el-col-16 {
    // height: 33px;
    // line-height: 33px;
    overflow: auto;
    text-align: end;
  }
}
.el-steps {
  margin: 10px 150px;
  .el-step__description {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
::v-deep(.el-step__title) {
         width: 150px;
        margin-left: -185px;
        display: flex;
        justify-content: flex-end;
  }
.tabs-item {
  background: var(--el-bg-color-page);
  color: #999;
  transition: all 0.3s;
  cursor: pointer;
  &:hover {
    background: #e8f2ff;
    color: var(--el-color-primary);
    transition: all 0.3s;
  }
}
.tabs-item.active {
  background: #e8f2ff;
  color: var(--el-color-primary);
  transition: all 0.3s;
  font-weight: bold;
  .tabs-icon {
    color: var(--el-color-primary);
    width: 20px;
    height: 20px;
  }
}
.close-btn {
  position: fixed;
  top: 50%;
  margin-left: -65px;
  cursor: pointer;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  background-color: var(--el-color-primary);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  &:hover {
    background-color: #f56c6c;

    i {
      transition: transform 0.5s, -webkit-transform 0.5s;
      transform: rotate(90deg);
    }
  }
}
.w-130{
  width: 800px;
}
.upload-file{
  width: 100%;
}
.mytable-scrollbar {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 5px;
  }
  ::-webkit-scrollbar-track,
    ::-webkit-scrollbar-corner {
      background-color: #FFFFFF;
    }
    ::-webkit-scrollbar-thumb {
      background-color: #bfbfbf;
    }
    ::-webkit-scrollbar-thumb:hover,
    ::-webkit-scrollbar-thumb:active {
      background-color: #787878;
    }
}
</style>
